<template>
  <div id="root">
<Top><p>兑换红包</p></Top>
    <van-cell-group>
      <van-field v-model="name" placeholder="请输入兑换码" />
      <van-field v-model="code" center clearable placeholder="验证码">
        <template #right-icon>
          <div class="input-img">
            <img :src="src" alt="">
            <div class="right-p1" @click="code1"><p>看不清</p><p class="right-p2">换一张</p></div>
          </div>
        </template>
      </van-field>

    </van-cell-group>
    <div class="button">
      <van-button type="primary" :color="color" @click="duihuan()" block>兑换</van-button>
    </div>
    <Tan><p>无效的兑换码</p></Tan>
  </div>
</template>

<script>
import Top from "@/components/Top";
import Tan from "@/components/Tan";
export default {
  name: "Duihuan",
  components: {Tan, Top},
  created() {
    this.code1();
  },
  data() {
    return {
      value: "",
      name:'',
      code:"",
      src:"",
      // color:"#7232dd",
    }
  },
  methods: {
    code1() {
      this.axios.post("https://elm.cangdu.org/v1/captchas").then((data) => {
        this.src=data.data.code;
      }).catch(error=>{
        console.log(error);
      });
    },
    duihuan(){
      if (this.color=='#4cd964'){
        this.$store.commit("clicktan",true)
      }
    }

  },
  computed: {
    color() {
     let num=/^\d/
      if (num.test(this.name)&&this.code.length>3){
        return "#4cd964";
      }else {
        return "#ccc";
      }

    }
  },
}
</script>

<style scoped>
#root{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background-color: #f1f1f1;
}
.input-img{
  /*background-color: #ffd930;*/
  display: flex;
  font-size: 6px;
}
.button{
  padding: 10px;
}
</style>